
 <template>
  <div class="home">
    <nava></nava>
    <div class="block">
      <!-- 轮播图 -->
      <el-carousel height="450px" width="100%" indicator-position="outside">
        <el-carousel-item v-for="image in images" :key="image">
          <img :src="image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div class="title">
        <!-- 标签页 el-tabs-->
        <el-tabs :tab-position="tabPosition" class="TAB" stretch="true">
          <el-tab-pane label="首页推荐">
            <!-- 图片展示 -->
            <works></works>
          </el-tab-pane>

          <el-tab-pane label="编辑推荐">
            <works></works>
          </el-tab-pane>
          <el-tab-pane label="版主推荐">
            <works></works>
          </el-tab-pane>
          <el-tab-pane label="最新">
            <works></works>
          </el-tab-pane>
          <el-tab-pane label="专辑">
            <el-row>
              <el-col :span="5" v-for="(o, index) in 4" :key="o" :offset="index > 3 ? 4: 1">
                <el-card :body-style="{ padding: '0px', position: absolute }" style>
                  <img
                    src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    class="image"
                    style="padding: 0px;"
                  />
                  <div style="padding: 10px;">
                    <button>专辑标题</button>
                    <p>18张图片</p>

                    <div style="  position: relative; margin-top: 5px;margin-left: -90px;">
                      <img
                        :src="user.user_image"
                        alt
                        @click="$router.push('/works')"
                        style=" width: 45px; height: 45px; border-radius: 50%;  "
                      />
                      <span style>昵称</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="机构品牌">
            <works></works>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="ranking">
        <div class="main-ranking-box">
          <div class="ranking-title">英雄榜</div>
          <div class="main-ranking__list">
            <div class="main-ranking__item-box">
              <a href target="_blank" class="main-ranking__item">
                <div class="ranking-item">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar-one"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/54/20174/201740650_1618480182_40072_S64.jpg&quot;) center center / cover no-repeat;"
                    >
                      <div
                        class="ranking-item__user-avatar-flag ranking-item__user-avatar-flag-one"
                      ></div>
                    </div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name-one"
                          style="max-width: 90px;"
                        >MarkC</span>
                        <i title="风光摄影红人" class="ranking-item__user-icon user_favourite"></i>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data-one">作品220丨粉丝11968</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort-one"></div>
                </div>
                <div class="main-ranking__item-line"></div>
              </a>
              <a href target="_blank" class="main-ranking__item">
                <div class="ranking-item">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar-two"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/88/20178/201786850_1627002946_19164_S64.jpg&quot;) center center / cover no-repeat;"
                    >
                      <div
                        class="ranking-item__user-avatar-flag ranking-item__user-avatar-flag-two"
                      ></div>
                    </div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name-two"
                          style="max-width: 90px;"
                        >STM丨Jon Cheng</span>
                        <i title="人文纪实|城市风光摄影红人" class="ranking-item__user-icon user_favourite"></i>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data-two">作品87丨粉丝6003</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort-two"></div>
                </div>
                <div class="main-ranking__item-line"></div>
              </a>
              <a href target="_blank" class="main-ranking__item">
                <div class="ranking-item" data-widget_cache_key="1631067155023_2">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar-three"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/15/5/53530_1593574495_51421_S64.jpg&quot;) center center / cover no-repeat;"
                    >
                      <div
                        class="ranking-item__user-avatar-flag ranking-item__user-avatar-flag-three"
                      ></div>
                    </div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name-three"
                          style="max-width: 90px;"
                        >旅行摄影师大维</span>
                        <i title="风光摄影超级红人" class="ranking-item__user-icon user_famous"></i>
                      </div>
                      <div
                        class="ranking-item__user-data ranking-item__user-data-three"
                      >作品442丨粉丝196273</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort-three"></div>
                </div>
                <div class="main-ranking__item-line"></div>
              </a>
              <a href target="_blank" class="main-ranking__item">
                <div class="ranking-item">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar--"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/30/20051/200513958_1624101181_52262_S64.jpg&quot;) center center / cover no-repeat;"
                    ></div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name--"
                          style="max-width: 90px;"
                        >西瓜呆毛汪</span>
                        <i title="人像摄影红人" class="ranking-item__user-icon user_favourite"></i>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data--">作品145丨粉丝67081</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort--">4</div>
                </div>
                <div class="main-ranking__item-line"></div>
              </a>
              <a href target="_blank" class="main-ranking__item">
                <div class="ranking-item">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar--"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/99/5780/57807199_1602834857_60111_S64.jpg&quot;) center center / cover no-repeat;"
                    ></div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name--"
                          style="max-width: 90px;"
                        >嘉木悠然</span>
                        <i title="生态摄影红人" class="ranking-item__user-icon user_favourite"></i>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data--">作品715丨粉丝8456</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort--">5</div>
                </div>
              </a>
            </div>
            <a  class="main-ranking__more">
              <span class="main-ranking__more--text" @click="$router.push('/Skills')">查看更多</span>
              <i class="main-ranking__more--icon"></i>
            </a>
          </div>
        </div>
        <div class="main-ranking-box">
          <div class="ranking-title list">新秀榜</div>
          <div class="main-ranking__list">
            <div class="main-ranking__item-box">
              <a target="_blank" href class="main-ranking__item">
                <div class="ranking-item" data-widget_cache_key="1631000824149">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar-one"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/11/20184/201841433_1628646232_89430_S64.jpg&quot;) center center / cover no-repeat;"
                    >
                      <div
                        class="ranking-item__user-avatar-flag ranking-item__user-avatar-flag-one"
                      ></div>
                    </div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name-one"
                          style="max-width: 120px;"
                        >牛鲜花</span>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data-one">作品79丨粉丝4548</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort-one"></div>
                </div>
                <div class="main-ranking__item-line"></div>
              </a>
              <a target="_blank" href class="main-ranking__item">
                <div class="ranking-item" data-widget_cache_key="1631000824150">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar-two"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/92/20180/201805733_1624888034_62659_S64.jpg&quot;) center center / cover no-repeat;"
                    >
                      <div
                        class="ranking-item__user-avatar-flag ranking-item__user-avatar-flag-two"
                      ></div>
                    </div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name-two"
                          style="max-width: 120px;"
                        >Eric Zhou</span>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data-two">作品47丨粉丝5933</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort-two"></div>
                </div>
                <div class="vm-main-ranking__item-line"></div>
              </a>
              <a target="_blank" class="main-ranking__item">
                <div class="ranking-item" data-widget_cache_key="1631000824150_1">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar-three"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/31/20179/201791886_1623476555_57621_S64.jpg&quot;) center center / cover no-repeat;"
                    >
                      <div
                        class="ranking-item__user-avatar-flag ranking-item__user-avatar-flag-three"
                      ></div>
                    </div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name-three"
                          style="max-width: 90px;"
                        >STM｜ Mincent_初摄</span>
                        <i title="人像摄影红人" class="ranking-item__user-icon user_favourite"></i>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data-three">作品46丨粉丝5577</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort-three"></div>
                </div>
                <div class="main-ranking__item-line"></div>
              </a>
              <a target="_blank" href class="main-ranking__item">
                <div class="ranking-item" data-widget_cache_key="1631000824150_2">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar--"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/47/20181/201813352_1630894712_36526_S64.jpg&quot;) center center / cover no-repeat;"
                    >
                      <!---->
                    </div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name--"
                          style="max-width: 120px;"
                        >Min铭皓</span>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data--">作品78丨粉丝5230</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort--">4</div>
                </div>
                <div class="main-ranking__item-line"></div>
              </a>
              <a target="_blank" href class="main-ranking__item">
                <div class="ranking-item" data-widget_cache_key="1631000824150_3">
                  <div class="ranking-item__user">
                    <div
                      class="ranking-item__user-avatar ranking-item__user-avatar--"
                      style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/avatar/14/20184/201840568_1628351735_51815_S64.jpg&quot;) center center / cover no-repeat;"
                    >
                      <!---->
                    </div>
                    <div class="ranking-item__user-info">
                      <div class="ranking-item__user-self">
                        <span
                          class="ranking-item__user-name ranking-item__user-name--"
                          style="max-width: 120px;"
                        >春暖花开777</span>
                      </div>
                      <div class="ranking-item__user-data ranking-item__user-data--">作品17丨粉丝4005</div>
                    </div>
                  </div>
                  <div class="ranking-item__sort ranking-item__sort--">5</div>
                </div>
                <!---->
              </a>
            </div>
            <a href="/ranking" class="main-ranking__more">
              <span class="main-ranking__more--text">查看更多</span>
              <i class="main-ranking__more--icon"></i>
            </a>
          </div>
        </div>
        <div class="main-ranking-box main-article__box">
          <div class="ranking-title list list2">推荐热文</div>
          <ul class="main-ranking__list" style="height: auto;">
            <li class="main-ranking__article">
              <a target="_blank" class="main-ranking__article__box">
                <div class="main-ranking__article--info">
                  <p class="main-ranking__article--title">海信、佳能强强联合，推进消费级8K影像解决方案！</p>
                  <div class="main-ranking__article--datas">
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon view"></i>
                      <span class="main-ranking__article--text">5359520</span>
                    </div>
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon star"></i>
                      <span class="main-ranking__article--text">8</span>
                    </div>
                  </div>
                </div>
                <div
                  class="main-ranking__article--img"
                  style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/works/65/2021/0514/20/16209960148203980_201362414_W120.jpg&quot;) center center / cover no-repeat;"
                ></div>
              </a>
              <div class="main-ranking__article--line"></div>
            </li>
            <li class="main-ranking__article">
              <a target="_blank" class="main-ranking__article__box">
                <div class="main-ranking__article--info">
                  <p class="main-ranking__article--title">大咖为你开小灶 ——颇可私塾火热开启</p>
                  <div class="main-ranking__article--datas">
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon view"></i>
                      <span class="main-ranking__article--text">9631561</span>
                    </div>
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon star"></i>
                      <span class="main-ranking__article--text">20</span>
                    </div>
                  </div>
                </div>
                <div
                  class="main-ranking__article--img"
                  style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/works/04/2021/0421/18/16190006833834392_201697705_W120.png&quot;) center center / cover no-repeat;"
                ></div>
              </a>
              <div class="main-ranking__article--line"></div>
            </li>
            <li class="main-ranking__article">
              <a target="_blank" class="main-ranking__article__box">
                <div class="main-ranking__article--info">
                  <p class="main-ranking__article--title">颇可官方社群汇总</p>
                  <div class="main-ranking__article--datas">
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon view"></i>
                      <span class="main-ranking__article--text">8471934</span>
                    </div>
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon star"></i>
                      <span class="main-ranking__article--text">12</span>
                    </div>
                  </div>
                </div>
                <div
                  class="main-ranking__article--img"
                  style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/works/48/2021/0421/18/16189999023886639_201697705_W120.png&quot;) center center / cover no-repeat;"
                ></div>
              </a>
              <div class="main-ranking__article--line"></div>
            </li>
            <li class="main-ranking__article">
              <a target="_blank" class="main-ranking__article__box">
                <div class="main-ranking__article--info">
                  <p class="main-ranking__article--title">颇可技巧分享 | 三招带你玩转POCO网站！快来码住~</p>
                  <div class="main-ranking__article--datas">
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon view"></i>
                      <span class="main-ranking__article--text">13708808</span>
                    </div>
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon star"></i>
                      <span class="main-ranking__article--text">132</span>
                    </div>
                  </div>
                </div>
                <div
                  class="main-ranking__article--img"
                  style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/works/13/2020/1029/10/16039399156352965_200134353_W120.jpg&quot;) center center / cover no-repeat;"
                ></div>
              </a>
              <div class="main-ranking__article--line"></div>
            </li>
            <li class="main-ranking__article">
              <a target="_blank" class="main-ranking__article__box">
                <div class="main-ranking__article--info">
                  <p class="main-ranking__article--title">颇可英雄传VOL28：与风光摄影命运般地邂逅</p>
                  <div class="main-ranking__article--datas">
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon view"></i>
                      <span class="main-ranking__article--text">4590</span>
                    </div>
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon star"></i>
                      <span class="main-ranking__article--text">0</span>
                    </div>
                  </div>
                </div>
                <div
                  class="main-ranking__article--img"
                  style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/works/20/2021/0907/15/16309999455476115_201759292_W120.jpg&quot;) center center / cover no-repeat;"
                ></div>
              </a>
              <div class="main-ranking__article--line"></div>
            </li>
            <li class="main-ranking__article">
              <a target="_blank" class="main-ranking__article__box">
                <div class="main-ranking__article--info">
                  <p class="main-ranking__article--title">颇可攻略 | 复古港风大片，用手机就能调！</p>
                  <div class="main-ranking__article--datas">
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon view"></i>
                      <span class="main-ranking__article--text">124628</span>
                    </div>
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon star"></i>
                      <span class="main-ranking__article--text">3</span>
                    </div>
                  </div>
                </div>
                <div
                  class="main-ranking__article--img"
                  style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/works/01/2021/0906/09/16308927907692837_201759292_W120.jpg&quot;) center center / cover no-repeat;"
                ></div>
              </a>
              <div class="main-ranking__article--line"></div>
            </li>
            <li class="main-ranking__article">
              <a target="_blank" class="main-ranking__article__box">
                <div class="main-ranking__article--info">
                  <p class="main-ranking__article--title">私塾学员作品 | 天气晚来秋</p>
                  <div class="main-ranking__article--datas">
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon view"></i>
                      <span class="main-ranking__article--text">171409</span>
                    </div>
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon star"></i>
                      <span class="main-ranking__article--text">1</span>
                    </div>
                  </div>
                </div>
                <div
                  class="main-ranking__article--img"
                  style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/works/29/2021/0903/14/16306500877051208_201710642_W120.jpg&quot;) center center / cover no-repeat;"
                ></div>
              </a>
              <div class="main-ranking__article--line"></div>
            </li>
            <li class="main-ranking__article">
              <a
                href="https://m.poco.cn/app/skill_detail?topic_id=33342"
                target="_blank"
                class="main-ranking__article__box"
              >
                <div class="main-ranking__article--info">
                  <p class="main-ranking__article--title">颇可视觉 | 当我们望向天空时</p>
                  <div class="main-ranking__article--datas">
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon view"></i>
                      <span class="main-ranking__article--text">227775</span>
                    </div>
                    <div class="main-ranking__article--data">
                      <i class="main-ranking__article--icon star"></i>
                      <span class="main-ranking__article--text">3</span>
                    </div>
                  </div>
                </div>
                <div
                  class="main-ranking__article--img"
                  style="background: url(&quot;//pic3-nc.pocoimg.cn/image/poco/works/70/2021/0902/17/16305738563288530_201710642_W120.jpg&quot;) center center / cover no-repeat;"
                ></div>
              </a>
            </li>
            <a href="" class="main-ranking__more">
              <span class="main-ranking__more--text" @click="$router.push('/Skills')">查看更多</span>
              <i class="main-ranking__more--icon"></i>
            </a>
          </ul>
          <div class="main-poco__info">
            <a
              href="https://beian.miit.gov.cn/"
              target="_blank"
              class="main-poco__info--box main-poco__info--text"
            >备案号：粤B2-20030218号-2</a>
            <p class="main-poco__info--box main-poco__info--text">ICP证号：粤B2-20030218</p>
            <div class="main-poco__info--box">
              <a
                href="//netadreg.gzaic.gov.cn/ntmm/WebSear/WebLogoPub.aspx?logo=15d48c4251a34df39d95050d0998ee6f"
                target="_blank"
              >
                <img
                  alt
                  src="//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/page/index/index/images/logo_down_c6789b4.jpg"
                  class="main-poco__info--icon"
                />
              </a>
              <a
                href="//www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010402000060"
                target="_blank"
                class="main-poco__info--link"
              >
                <img
                  src="//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/page/index/index/images/poli_8a53b90.png"
                  class="main-poco__info--icon"
                />
                <span class="main-poco__info--text">粤公网安备 44010402000060号</span>
              </a>
            </div>
            <p class="main-poco__info--box main-poco__info--text">Copyright © 2003 - 2019</p>
          </div>
        </div>
      </div>
    </div>
    <div class="w_btn_go_top" style="bottom: 148px;" @click="backtop" v-show="isshow">
      <i class="iconfont icon-xiangshangjiantou"></i>
    </div>
    <div class="contact-us" style="bottom: 60px;" @mouseleave="test=false">
      <div class="contact-us__text" @mouseenter="test=true">联系我们</div>
      <div class="contact-us__box" v-show="test">
        <div class="contact-us__logo">
          <img
            src="//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/contact_us/i/logo_6b4f126.png"
            alt="logo"
            class="contact-us__logo--img"
          />
          <div class="contact-us__logo--line"></div>
        </div>
        <div class="contact-us__help">
          <a href="https://www.poco.cn/custom/help?item=business" class="contact-us__help--item">
            <i class="contact-us__help--icon work"></i>
            <span class="contact-us__help--text">商务合作</span>
          </a>
          <a href="https://www.poco.cn/custom/help?item=feedback" class="contact-us__help--item">
            <i class="contact-us__help--icon message"></i>
            <span class="contact-us__help--text">留言反馈</span>
          </a>
          <a href="https://www.poco.cn/custom/help?item=help" class="contact-us__help--item">
            <i class="contact-us__help--icon help"></i>
            <span class="contact-us__help--text">帮助中心</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import nava from "@/components/nava.vue";

import works from "@/components/works.vue";

export default {
  components: {
    nava,

    works
  },
  data() {
    return {
      ishow: false,
      test: false,
      test2: false,
      isshow: false, //回到顶部
   
      showBox: false, //显示隐藏
      currentDate: new Date(),
      tabPosition: "top", //标签页
      user: {
        user_image:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11642496893%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630206237&t=e31aca58152407dc03641893f1dcd97c"
      },
      images: [
        "https://pic3.pocoimg.cn/image/poco/works/27/2021/0724/16/16271164574897599_201759292.png?imageMogr2/auto-orient/thumbnail/1920x/blur/1x0/quality/100&",
        "https://pic3.pocoimg.cn/image/poco/works/99/2021/0630/18/16250475068686513_201362414.jpg?imageMogr2/auto-orient/thumbnail/1920x/blur/1x0/quality/100&",
        "https://pic3.pocoimg.cn/image/poco/works/84/2021/0726/14/16272812586060195_201362414.png?imageMogr2/auto-orient/thumbnail/1920x/blur/1x0/quality/100&",
        "https://pic3.pocoimg.cn/image/poco/works/78/2021/0719/09/16266586245773477_201710642.png?imageMogr2/auto-orient/thumbnail/1920x/blur/1x0/quality/100&",
        "https://pic3.pocoimg.cn/image/poco/works/48/2021/0726/09/16272632054316805_201759292.png?imageMogr2/auto-orient/thumbnail/1920x/blur/1x0/quality/100&"
      ] //轮播图
    };
  },
  methods: {
    listenerFunction(e) {
      document.addEventListener("scroll", this.handleScroll, true);
    },
    beforeDestroy() {
      document.removeEventListener("scroll", this.listenerFunction);
    },
    handleScroll() {
      if (window.pageYOffset > 300) {
        //window.pageYOffset   滚动距离
        this.isshow = true;
      } else {
        this.isshow = false;
      }
    },
    //回顶部
    backtop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      //滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    }

    //显示隐藏
  },
  mounted() {
    this.listenerFunction();
  }
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.home {
  min-width: 1500px;
}
.content {
  margin-top: 20px;
  margin-left: 50px;

  .title {
    float: left;
    width: 67%;
    position: absolute;
    .TAB {
      margin-left: -20px;
      /deep/.el-tabs__item.is-active {
        color: #46d233;
      }
      /deep/ .el-tabs__item:hover {
        background-color: #46d233;
        color: #fff;
      }
      /deep/ .el-tabs__item {
        width: 100px;
        font-size: 13px;
        height: 43px;
        border-bottom: 0px solid #ffff;
        padding: 0;
      }
      /deep/.el-tabs__nav-wrap::after {
        height: 0px;
      }
      /deep/.el-tabs__active-bar {
        height: 0px;
      }
      /deep/.el-tabs__content {
        margin-left: 30px;
      }
    }
  }
  .image {
    width: 100%;
  }
  .pop-up-box {
    position: absolute;
    min-width: 1300px;

    /deep/.el-dialog {
      background-color: #000;
    }
  }
} //榜单
.ranking {
  float: right;
  width: 27.5%;
  margin-right: 30px;
  flex-basis: 288px;
  .main-ranking-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 328px;
    margin-top: 0px;

    .list {
      margin-top: 40px;
    }
    .ranking-title::before {
      content: "";
      position: absolute;
      left: 112px;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      width: 20px;
      height: 14px;
      background: center/100%
        url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/page/index/index/images/title-icon_58545b9.png)
        no-repeat;
    }
    .ranking-title {
      position: relative;
      font-size: 26px;
      line-height: 1.5;
      text-align: center;
      color: #333;
      letter-spacing: 8px;
    }
    .ranking-title::after {
      content: "";
      position: absolute;
      right: 120px;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      width: 20px;
      height: 14px;
      background: center/100%
        url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/page/index/index/images/title-icon_58545b9.png)
        no-repeat;
    }
    .list2::after {
      right: 155px;
    }
    .list2::before {
      left: 145px;
    }
    a {
      text-decoration: none;
    }
    .main-ranking__list {
      width: 100%;
      height: 591px;
      margin-top: 17px;
      background-color: #f0ffff;
      box-sizing: border-box;
      .main-ranking__item-box {
        width: 100%;
        height: 590px;
        .main-ranking__item {
          display: block;
          position: relative;
          padding: 39px 22px 30px 28px;
          box-sizing: border-box;
          .ranking-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .ranking-item__user {
              display: flex;
              align-items: center;
              flex: 1;
              .ranking-item__user-avatar-one {
                border: 1px solid #e9ca98;
              }

              .ranking-item__user-avatar {
                position: relative;
                width: 50px;
                height: 50px;
                border: 1px solid #e5e5e5;
                border-radius: 50%;
                box-sizing: border-box;
              }
              .ranking-item__user-avatar-flag-one {
                background: center/100%
                  url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_ranking_item/i/ranking-avatar-1_ebf123c.png)
                  no-repeat;
              } //调用数据库
              .ranking-item__user-avatar-flag {
                position: absolute;
                left: -10px;
                top: -10px;
                width: 68px;
                height: 68px;
              }
              .ranking-item__user-avatar-two {
                border: 1px solid #d0dfe1;
              }
              .ranking-item__user-avatar-flag-two {
                background: center/100%
                  url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_ranking_item/i/ranking-avatar-2_931188b.png)
                  no-repeat;
              }

              .ranking-item__user-name-two {
                color: #5d5d5d;
              }
              .ranking-item__user-data-two {
                color: #898989;
              }
              .ranking-item__user-avatar-three {
                border: 1px solid #fbb481;
              }
              .ranking-item__user-avatar-flag-three {
                background: center/100%
                  url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_ranking_item/i/ranking-avatar-3_76696f4.png)
                  no-repeat;
              }
              .ranking-item__user-data-three {
                color: #eea370;
              }
              .ranking-item__user-name-three {
                color: #f07823;
              }
              .ranking-item__user-name-- {
                color: #333;
              }
              .ranking-item__user-data-- {
                color: #666;
              }
            }
            .ranking-item__user-info {
              display: flex;
              justify-content: center;
              flex-direction: column;
              flex: 1;
              padding-left: 10px;
              padding-right: 7px;
              .ranking-item__user-self {
                display: flex;
                align-items: center;
                .ranking-item__user-name-one {
                  color: #eeb861;
                }
                .ranking-item__user-name {
                  max-width: 60px;
                  font-size: 15px;
                  line-height: 25px;
                  text-align: left;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                }
                .ranking-item__user-icon.user_favourite {
                  background-image: url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/image/verified_icon/user_favourite_b_60dee83.png);
                }
                .ranking-item__user-icon.user_famous {
                  background-image: url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/image/verified_icon/user_famous_b_4a74b64.png);
                }
                .ranking-item__user-icon {
                  display: block;
                  width: 17px;
                  height: 17px;
                  background: center/100% no-repeat;
                  margin-left: 7px;
                }
              }
              .ranking-item__user-data-one {
                color: #f9b956;
              }
              .ranking-item__user-data {
                font-size: 12px;
                line-height: 18px;
                margin-left: -50px;
              }
            }
            .ranking-item__sort-one {
              background: center/100%
                url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_ranking_item/i/ranking-sort-1_a85e66f.png)
                no-repeat;
            }
            .ranking-item__sort-two {
              background: center/100%
                url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_ranking_item/i/ranking-sort-2_ce55550.png)
                no-repeat;
            }
            .ranking-item__sort-three {
              background: center/100%
                url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_ranking_item/i/ranking-sort-3_821bf04.png)
                no-repeat;
            }
            .ranking-item__sort {
              width: 46px;
              height: 42px;
              text-align: center;
              font-weight: 700;
              font-size: 28px;
              line-height: 39px;
              color: #5bd334;
              text-shadow: 0 4px 4px rgb(183 183 183 / 30%);
            }
          }
          .main-ranking__item-line {
            position: absolute;
            bottom: 0;
            left: 28px;
            width: 259px;
            height: 1px;
            background-color: #f5f5f5;
          }
        }
      }
      .main-ranking__more {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0 11px;
        border-top: 1px solid #f5f5f5;
        cursor: pointer;
        box-sizing: border-box;
        background-color: #f0ffff;
        .main-ranking__more--text {
          padding-right: 4px;
          font-size: 14px;
          line-height: 150%;
          color: #333;
        }
        .main-ranking__more--icon {
          display: block;
          width: 8px;
          height: 13px;
          background: center/100%
            url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/page/index/index/images/arrow-icon_c466b72.png)
            no-repeat;
        }
      }
      li {
        list-style: none;
      }
      ul,
      li,
      dl,
      dt,
      dd {
        padding: 0;
        margin: 0;
        list-style-type: none;
        list-style-position: outside;
      }
      em,
      i {
        font-style: normal;
      }
      .main-ranking__article {
        position: relative;
        padding: 10px;
        .main-ranking__article__box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .main-ranking__article--info {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 154px;
            padding-right: 7px;
            .main-ranking__article--title {
              width: 100%;
              height: 40px;
              font-size: 14px;
              line-height: 20px;
              color: #333;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;

              transition: all 0.2s;
            }
            .main-ranking__article--datas {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              margin-top: 17px;
              padding-left: 2px;
              .main-ranking__article--data {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding-left: 15px;
                .main-ranking__article--icon {
                  display: block;
                  width: 12px;
                  height: 12px;
                }
                .view {
                  background: center/100%
                    url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/page/index/index/images/article-view-icon_4eca187.png)
                    no-repeat;
                }
                .star {
                  background: center/100%
                    url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/page/index/index/images/article-star-icon_038d0c6.png)
                    no-repeat;
                }

                .main-ranking__article--text {
                  font-size: 10px;
                  line-height: 14px;
                  color: #999;
                  padding-left: 1px;
                }
              }
              .ain-ranking__article--data:first-of-type {
                padding-left: 0;
              }
            }
          }
          .main-ranking__article--img {
            width: 105px;
            height: 74px;
          }
        }
        .main-ranking__article--line {
          position: absolute;
          bottom: 0;
          left: 17px;
          width: 271px;
          height: 1px;
          background-color: #f5f5f5;
        }
      }
    }
  }
}
//详细文子
.main-poco__info {
  width: 100%;
  margin-top: 14px;
  font-size: 13px;
  .ain-poco__info--text {
    font-size: 14px;
    line-height: 17px;
    color: #999;
  }
  .main-poco__info--box {
    display: flex;
    align-items: center;
    margin-top: 12px;
  }
  .main-poco__info--icon {
    width: 18px;
    vertical-align: middle;
  }
  .main-poco__info--link {
    margin-left: 5px;
  }
}
//回到顶部
.w_btn_go_top {
  position: fixed;
  right: 40px;
  bottom: 108px;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  line-height: 44px;

  .iconfont {
    color: #fff;
  }
}
//联系我们
.contact-us {
  position: fixed;
  right: 40px;
  bottom: 60px;
  padding-left: 11px;
  z-index: 100;
  -webkit-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  box-sizing: border-box;
  .contact-us__text {
    width: 44px;
    height: 44px;
    padding: 6px 10px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
  }

  .contact-us__box {
    // display: none;
    position: absolute;
    left: -97px;
    bottom: 0;
    width: 97px;
    height: 147px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    box-sizing: border-box;
    a {
      text-decoration: none;
    }
    .contact-us__logo {
      position: relative;
      width: 100%;
      padding: 15px 18px 13px 16px;
      box-sizing: border-box;
      .contact-us__logo--img {
        width: 62px;
        height: 15px;
      }
      .contact-us__logo--line {
        position: absolute;
        left: 15px;
        bottom: 0;
        width: 65px;
        height: 1px;
        background: #f5f5f5;
        border-radius: 2px;
      }
      fieldset,
      img {
        border: 0;
      }
    }
    .contact-us__help {
      padding: 6px 0 8px;
      .contact-us__help--item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 0;

        .work {
          width: 11px;
          height: 11px;
          background: center/100%
            url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/contact_us/i/work-icon_8e0f065.png)
            no-repeat;
        }
        .contact-us__help--text {
          font-size: 12px;
          line-height: 1.5;
          color: #333;
        }
        .contact-us__help--text:hover {
          color: #63d233;
        }
        .contact-us__help--icon {
          margin-right: 7px;
        }
        .message {
          width: 11px;
          height: 11px;
          background: center/100%
            url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/contact_us/i/message-icon_c4cbad8.png)
            no-repeat;
        }
        .help {
          width: 12px;
          height: 12px;
          background: center/100%
            url(//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/contact_us/i/help-icon_87b5439.png)
            no-repeat;
        }
      }
    }
  }
}

//专辑
.el-col-offset-1 {
  margin-left: 3.5%;
}
</style>
